<template>
  <div class="data-users">
    <section class="part1 clear">
      <div class="user-count-box fl">
        <div class="c-title">
          <span>用户统计</span>
        </div>
        <div class="user-count bgc1">
          <ul class="clear">
            <li>
              <span class="app-sum">{{userData.total_num}}</span>
              <span class="app-name">用户总数</span>
            </li>
            <li>
              <span class="app-sum">{{userData.teacher_num}}</span>
              <span class="app-name">教师</span>
            </li>
            <li>
              <span class="app-sum">{{userData.student_num}}</span>
              <span class="app-name">学生</span>
            </li>
          </ul>
        </div>
        <div class="c-title">
          <span>用户性别分析</span>
        </div>
        <div class="sex-analysis circle bgc1">
          <div class="circle-l">
            <div class="container">
              <div class="data">
                <el-progress type="circle" color="#08DBFF" :stroke-width="12" :percentage="Math.round(userData.male_percent)"></el-progress>
              </div>
              <div class="title">
                <p>男性</p>
                <p>{{userData.male_num}}</p>
              </div>
            </div>
          </div>

          <div class="circle-r">
            <div class="container">
              <div class="data">
                <el-progress type="circle" color="#FF46CE" :stroke-width="12" :percentage="Math.round(userData.female_percent)"></el-progress>
              </div>
              <div class="title">
                <p>女性</p>
                <p>{{userData.female_num}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="lively-users fl">
        <div class="c-title clear">
          <span>活跃用户</span>
          <template>
            <el-select class="fr" v-model="activeDayVal" placeholder="选择时间">
              <el-option v-for="item in activeDays" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </div>
        <div class="lively-map bgc1">
          <lineChart v-if="activeChartFlag==true" id="visits-chart" style="width: 100%;height:100%;" :chartData.sync="activeUserData"></lineChart>
          <div v-else class="no-data-tips">- 暂无数据 -</div>
        </div>
      </div>
    </section>
    <section class="part2 clear">
      <div class="platform-user fl">
        <div class="c-title">
          <span>平台用户数</span>
          <template>
            <el-select class="fr" v-model="platformDayVal" placeholder="选择时间">
              <el-option v-for="item in platformDays" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </div>
        <div class="user-map bgc1">
          <lineChart v-if="platformChartFlag==true" id="users-chart" style="width: 100%;height:100%;" :chartData.sync="platformUserData"></lineChart>
          <div v-else class="no-data-tips">- 暂无数据 -</div>
        </div>
      </div>

      <div class="others-box fl">
        <div class="c-title">
          <span>其他</span>
        </div>
        <div class="statistics sampling bgc1">
          <ul>
            <li>
              <p class="clear">
                <span class="percent-name fl">院校</span>
                <span class="percentage fr">{{connectData.school_percent}}%</span>
              </p>
              <el-progress :show-text="false" :stroke-width="24" :percentage="Math.round(connectData.school_percent)"></el-progress>
            </li>
            <!-- <li>
              <p class="clear">
                <span class="percent-name fl">教育局</span>
                <span class="percentage fr">{{connectData.department_percent}}%</span>
              </p>
              <el-progress :show-text="false" :stroke-width="24" :percentage="Math.round(connectData.department_percent)"></el-progress>
            </li> -->
          </ul>
          <div class="tips">
            <p>上方数据为平台接入量</p>
            <p>数据取自 {{getDateDiff(connectData.update_time)}}</p>
          </div>
        </div>
        <div class="c-title">
          <span>新增用户</span>
        </div>
        <div class="new-users bgc1">
          <div class="resource-carousel" v-if="newUsersData.length>0">
            <template>
              <el-carousel height="146px" direction="vertical" indicator-position="none">
                <el-carousel-item v-for="(item,index) of newUsersData" :key="index">
                  <div class="carousel-item">
                    <div class="box clear">
                      <!-- <img src="../../../assets/images/" alt="头像"> -->
                      <div class="info">
                        <p class="title1" :title="item.name">{{item.name}}</p>
                        <p class="title2">{{item.create_time}}</p>
                      </div>
                    </div>
                    <p class="time-box">{{getDateDiff(item.create_time)}}</p>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </template>
          </div>
          <div class="no-data-tips" v-else>- 暂无新增用户 -</div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
// 引入公用折线图组件
import lineChart from '../Charts/lineChart'
// 引用大数据js里面的2个公用函数
import { getPassData, changeSimpleDate } from '../../../assets/js/charts/chartsTool.js'
//折线图默认数据:
const defaultChartData = {
  yAxisName: "",//鼠标hover显示框中显示y轴的名称
  timeTitle: "",//日期区间标题
  dateData: [],//日期数组
  countData: [],//访问量数组
}
export default {
  components: {
    lineChart
  },
  props: ["platformId"],//上级页面传来的平台id
  data() {
    return {
      //用户统计&用户性别分析
      userData: {
        female_num: 0,//女性
        female_percent: 0,//女性占比
        male_num: 0,//男性
        male_percent: 0,//男性占比
        student_num: 0,//学生
        teacher_num: 0,//教师
        total_num: 0,//用户总数
      },
      //活跃用户
      activeChartFlag: false,//默认不显示活跃用户图表
      activeUserData: Object.assign({}, defaultChartData),
      activeDays: [
        {
          value: "2",
          label: "近3天"
        },
        {
          value: "6",
          label: "近7天"
        },
        {
          value: "29",
          label: "近30天"
        }
      ],
      activeDayVal: "29",//默认选中三十天
      //平台用户
      platformChartFlag: false,//默认不显示平台用户数图表
      platformUserData: Object.assign({}, defaultChartData),
      platformDays: [
        {
          value: "2",
          label: "近3天"
        },
        {
          value: "6",
          label: "近7天"
        },
        {
          value: "29",
          label: "近30天"
        }
      ],
      platformDayVal: "29",
      //其他
      connectData: {
        update_time: "",
        school_num: 0,
        department_num: 0,
        school_percent: 0,
        department_percent: 0
      },
      // 新增用户
      newUsersData: [],
    };
  },
  created() {

  },
  watch: {
    //上级页面传来的平台id值
    platformId: {
      handler(a, b) {
        if (a != "") {
          this.getConnectCount();
          this.getUserCount();
          this.getActiveUsers();
          this.getPlatformUsers();
          this.getNewUsers();
        }
      },
      immediate: true
    },
    //活跃用户  下拉框选查看不同的天数
    "activeDayVal"(a, b) {
      if (a != b) {
        this.getActiveUsers();
      }
    },
    //平台用户数  下拉框选查看不同的天数
    "platformDayVal"(a, b) {
      if (a != b) {
        this.getPlatformUsers();
      }
    },
  },
  methods: {
    // 获取用户统计数据
    getUserCount() {
      let success = res => {
        if (!is_empty(res.data)) {
          this.userData = res.data;
        }
      };
      this.$ajax({
        url: "api/bigdata/index_userdata",
        method: "get",
        params: {
          platform_id: this.platformId
        },
        func: { success: success }
      });
    },
    //获取活跃用户数据
    getActiveUsers() {
      //先把原有的图表数据清理：
      this.activeChartFlag = false;
      this.activeUserData = Object.assign({}, deep_clone(defaultChartData));
      let success = res => {
        if (!is_empty(res.data)) {
          this.activeUserData.yAxisName = "人数";
          this.activeUserData.timeTitle = getPassData(this.activeDayVal, "/") + "-" + getPassData(0, "/");//最近7天日期字符串
          let dataArr = res.data.data;
          for (let inx in dataArr) {
            this.activeUserData.dateData.push(changeSimpleDate(dataArr[inx].key));//日期数组，用于图表横坐标
            this.activeUserData.countData.push(dataArr[inx].time_value);//活跃用户数数组，用于图表纵坐标
          }
          this.activeChartFlag = true;//显示图表
        }
      };
      this.$ajax({
        url: "api/bigdata/user_activedata",
        method: "get",
        params: {
          start_time: getPassData(this.activeDayVal, "-"),
          end_time: getPassData(0, "-"),
          page: 1,
          platform_id: this.platformId
        },
        func: { success: success }
      });
    },
    // 获取平台用户数据
    getPlatformUsers() {
      //先把原有的图表数据清理：
      this.platformChartFlag = false;
      this.platformUserData = Object.assign({}, deep_clone(defaultChartData));
      let success = res => {
        if (!is_empty(res.data)) {
          this.platformUserData.yAxisName = "人数";
          this.platformUserData.timeTitle = getPassData(this.platformDayVal, "/") + "-" + getPassData(0, "/");//最近7天日期字符串
          let dataArr = res.data.data;
          for (let inx in dataArr) {
            this.platformUserData.dateData.push(changeSimpleDate(dataArr[inx].key));//日期数组，用于图表横坐标
            this.platformUserData.countData.push(dataArr[inx].time_value);//平台用户量数组，用于图表纵坐标
          }
          this.platformChartFlag = true;//显示图表
        }
      };
      this.$ajax({
        url: "api/bigdata/user_countdata",
        method: "get",
        params: {
          start_time: getPassData(this.platformDayVal, "-"),
          end_time: getPassData(0, "-"),
          page: 1,
          platform_id: this.platformId
        },
        func: { success: success }
      });
    },
    // 其他
    getConnectCount() {
      let success = res => {
        this.connectData = res.data;
      };
      this.$ajax({
        url: "api/bigdata/user_platformcount",
        method: "get",
        params: {
          platform_id: this.platformId
        },
        func: { success: success }
      });
    },
    // 新增用户
    getNewUsers() {
      let success = res => {
        this.newUsersData = res.data;
      };
      this.$ajax({
        url: "api/bigdata/user_useradd",
        method: "get",
        params: {
          platform_id: this.platformId
        },
        func: { success: success }
      });
    },
  }
};
</script>
